<template>
  <canvas id="c"></canvas>
  <div class="loginForm" v-if="!isRegister">
    <div class="logo">
      <img src="vite.svg" alt="logo">
      bowlCake管理系统
    </div>
    <t-form ref="loginForm" class="login" :data="data.formData" :rules="data.rules" :label-width="0" @submit="onSubmit">
      <t-form-item name="account">
        <t-input v-model="data.formData.account" clearable placeholder="请输入账户名">
          <template #prefix-icon>
            <desktop-icon />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item name="password">
        <t-input v-model="data.formData.password" type="password" clearable placeholder="请输入密码">
          <template #prefix-icon>
            <lock-on-icon />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item>
        <t-button type="submit" theme="success" block>登录</t-button>
      </t-form-item>
      <t-form-item>
        <t-button block @click="register">注册</t-button>
      </t-form-item>
    </t-form>
  </div>
  <div class="registerForm" v-else>
    <div class="logo">
      <img src="vite.svg" alt="logo">
      bowlCake管理系统
    </div>
    <t-form ref="registerForm" class="register" :data="data.registerForm" :rules="data.registerRules" :label-width="60"
      @submit="onRegister" label-align="right">
      <t-form-item name="account" label="账户名">
        <t-input v-model="data.registerForm.account" clearable placeholder="请输入账户名" />
      </t-form-item>
      <t-form-item name="password" label="密码">
        <t-input v-model="data.registerForm.password" type="password" clearable placeholder="请输入密码" />
      </t-form-item>
      <t-form-item name="username" label="姓名">
        <t-input v-model="data.registerForm.username" clearable placeholder="请输入姓名" />
      </t-form-item>
      <t-form-item name="age" label="年龄">
        <t-input-number v-model="data.registerForm.age" />
      </t-form-item>
      <t-form-item name="sex" label="性别">
        <t-radio-group v-model="data.registerForm.sex">
          <t-radio value="男">男</t-radio>
          <t-radio value="女">女</t-radio>
        </t-radio-group>
      </t-form-item>
      <t-form-item name="type" label="类别">
        <t-radio-group v-model="data.registerForm.type">
          <t-radio :value="0">学生</t-radio>
          <t-radio :value="1">教师</t-radio>
        </t-radio-group>
      </t-form-item>
      <t-form-item :label-width="0">
        <t-button type="submit" theme="success" block>注册</t-button>
      </t-form-item>
      <t-form-item :label-width="0">
        <t-button block @click="register">返回登录</t-button>
      </t-form-item>
    </t-form>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, Ref, ref } from 'vue';
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';
import Bg from '../assets/js/bg';
import { MessagePlugin } from 'tdesign-vue-next';
import { Register, Login } from '../api/Login';
import { useStore } from 'vuex';
import router from '../router';

const store = useStore();
const isRegister: Ref<boolean> = ref(false);
const data = reactive({
  formData: {
    account: '',
    password: ''
  },
  rules: {
    account: [
      { required: true, message: '请输入正确的账号' },
      { min: 5, message: '内容不允许少于5个字符' },
      { max: 20, message: '内容不允许超过20个字符' },
    ],
    password: [{ required: true, message: '请输入正确的密码' }],
  },
  registerForm: {
    account: '',
    password: '',
    username: '',
    sex: '男',
    age: 0,
    type: 0,
  },
  registerRules: {
    account: [
      { required: true, message: '请输入账号' },
      { min: 5, message: '账号不允许少于5个字符' },
      { max: 20, message: '账号不允许超过20个字符' },
    ],
    password: [
      { required: true, message: '请输入密码' },
      { min: 5, message: '密码不允许少于5个字符' },
      { max: 20, message: '密码不允许超过20个字符' },
    ],
    username: [
      { required: true, message: '请输入姓名' },
      { min: 4, message: '姓名不允许少于2个字' },
      { max: 12, message: '姓名不允许超过5个字' },
    ],
    age: [[
      { required: true, message: '请填写年龄' },
      { number: true, message: '请输入数字' },
    ]
    ],
    sex: [
      { required: true, message: '请选择性别' }
    ],
    type: [
      { required: true, message: '请选择类别' }
    ]
  },
});
onMounted(() => {
  Bg();
});
// 登录
async function onSubmit({ validateResult }: { validateResult: boolean }) {
  if (typeof validateResult === 'boolean') {
    const result = await Login(data.formData);
    MessagePlugin.success(result.message);
    store.commit('setToken', result.result.token);
    store.commit('setLogged', true);
    store.commit('setUserType', result.result.type);
    store.commit('setUsername', result.result.username);
    router.push({ name: 'index' });
  }
}
// 注册
async function onRegister({ validateResult }: { validateResult: boolean }) {
  if (typeof validateResult === 'boolean') {
    const result = await Register(data.registerForm);
    MessagePlugin.success(result.message);
    isRegister.value = false;
  }
}
// 切换注册/登录
function register() {
  isRegister.value = isRegister.value === true ? false : true;
}
</script>
<style lang="less">
#c {
  z-index: -1;
  position: fixed;
  left: 0;
  top: 0;
}

.loginForm {
  width: 400px;
  height: 500px;
  opacity: 0.8;
  background-color: #f3f3f3;
  border-radius: 20px;
  margin: 10% auto;

  .logo {
    text-align: center;
    padding: 20px 0px 20px 0;
    font-size: 20px;
    font-weight: 900;
  }

  .login {
    width: 350px;
    margin: 25px;
  }
}

.registerForm {
  width: 400px;
  height: 550px;
  opacity: 0.8;
  background-color: #f3f3f3;
  border-radius: 20px;
  margin: 10% auto;

  .logo {
    text-align: center;
    padding: 20px 0px 20px 0;
    font-size: 20px;
    font-weight: 900;
  }

  .register {
    margin: 25px;
  }
}
</style>
